<template>
  <div class="chart">
    <el-select v-model="value" placeholder="请选择" @change="drawABCD">
      <el-option
        v-for="item in selectOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-row>
      <el-col :span="6">
        <div id="ABCD" class="ABCD"></div>
      </el-col>
      <el-col :span="18"
        ><center><div id="echart" class="echart"></div></center
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { path } from "../../config.json";
export default {
  name: "Chart",
  data() {
    return {
      allSc: [],
      allClass: [],
      classNames: [],
      selectOptions: [],
      value: "离散数学",
      ABCDMap: [],
    };
  },
  methods: {
    async myEchart() {
      //将chart绑定到div中
      var myChart = echarts.init(document.getElementById("echart"));
      //获取所有的课程名
      this.classNames = new Array();
      let allClassTemp = this.allClass;
      for (let i in allClassTemp) {
        this.classNames.push(allClassTemp[i].classname);
      }

      //将课程名设为x轴
      let scTemp = this.allSc;
      for (let i in scTemp) {
        let temp = {
          name: scTemp[i].classname,
          type: "line",
          stack: "总量",
          data: [],
        };
      }

      //获取平均分
      let mySeries = new Array();
      let aveScore = new Array();
      for (let i in this.classNames) {
        await axios({
          headers: {
            token: sessionStorage.getItem("token"), //此处放置请求到的用户token
          },
          method: "post",
          url: path + "/user/findAveScore",
          data: {
            classname: this.classNames[i],
          },
        }).then((res) => {
          aveScore.push(res.data);
        });
      }
      mySeries.push({
        name: "平均分",
        type: "line",
        data: aveScore,
      });

      //获取最高分
      let maxScore = new Array();
      for (let i in this.classNames) {
        await axios({
          headers: {
            token: sessionStorage.getItem("token"), //此处放置请求到的用户token
          },
          method: "post",
          url: path + "/user/findMaxScore",
          data: {
            classname: this.classNames[i],
          },
        }).then((res) => {
          maxScore.push(res.data[0].score);
        });
      }
      mySeries.push({
        name: "最高分",
        type: "line",
        data: maxScore,
      });

      //获取最低分
      let minScore = new Array();
      for (let i in this.classNames) {
        await axios({
          headers: {
            token: sessionStorage.getItem("token"), //此处放置请求到的用户token
          },
          method: "post",
          url: path + "/user/findMinScore",
          data: {
            classname: this.classNames[i],
          },
        }).then((res) => {
          minScore.push(res.data[0].score);
        });
      }
      mySeries.push({
        name: "最低分",
        type: "line",
        data: minScore,
      });

      let option = {
        title: {
          text: "分数统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["平均分", "最高分", "最低分"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.classNames,
          nameTextStyle: {
            fontWeight: "bold",
            fontsize: 20,
          },
          axisLabel: {
            interval: 0,
            rotate: 45,
          },
        },
        yAxis: {
          type: "value",
          max: 100,
        },
        series: mySeries,
      };
      myChart.setOption(option);
    },
    getClass() {
      for (let i in this.classNames) {
        let temp = {
          value: this.classNames[i],
          label: this.classNames[i],
        };
        this.selectOptions.push(temp);
      }
    },
    async drawABCD(classname) {
      this.ABCDMap = new Map();
      await axios({
        headers: {
          token: sessionStorage.getItem("token"), //此处放置请求到的用户token
        },
        method: "post",
        url: path + "/user/getGradeAsMap",
        data: {
          classname: classname,
        },
      }).then((res) => {
        this.ABCDMap = res.data;
      });
      let ABCDChart = echarts.init(document.getElementById("ABCD"));
      let temp = this.ABCDMap;
      let option = {
        title: {
          text: classname,
          subtext: "成绩分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "等级",
            type: "pie",
            radius: "50%",
            data: [
              { value: temp["A"], name: "等级A" },
              { value: temp["B"], name: "等级B" },
              { value: temp["C"], name: "等级C" },
              { value: temp["D"], name: "等级D" },
              { value: temp["E"], name: "等级E" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      ABCDChart.setOption(option);
    },
  },
  async mounted() {
    axios({
      headers: {
        token: sessionStorage.getItem("token"), //此处放置请求到的用户token
      },
      method: "post",
      url: path + "/Sc/findAllSc",
      data: {},
    }).then((res) => {
      this.allSc = res.data;
    });
    await axios({
      headers: {
        token: sessionStorage.getItem("token"), //此处放置请求到的用户token
      },
      method: "post",
      url: path + "/classTable/findAllClassTable",
      data: {},
    }).then((res) => {
      this.allClass = res.data;
    });
    this.myEchart();
    this.getClass();
    this.drawABCD("离散数学");
  },
};
</script>
<style>
.echart {
  width: 150vh;
  height: 80vh;
}
.ABCD {
  width: 50vh;
  height: 80vh;
  margin: auto;
}
</style>